<template>
  <BasicForm
    :schemas="schemas"
    :inline="true"
    :model="searchForm"
    @search="handleSearch"
    @reset="handleReset"
  >
    <template #btn>
      <el-button type="primary" @click="handleListData('add')">新增</el-button>
    </template>
  </BasicForm>
  <BasicTable
    :data="tableData"
    :columns="columns"
    :page="searchForm.page"
    :limit="searchForm.limit"
    :pagination="{ total }"
  />
  <UserDataDialog
    ref="userDataRef"
    json-name="UserDataDialog"
    :dialog-info="userDataDialogInfo"
    @close="getTableData"
  />
  <UserBindMenuDialog ref="bindMenuRef" />
</template>
<script lang="tsx" setup name="UserManageInfoIndex">
import { ref, onMounted } from 'vue'
import { withLoading } from '@/utils'
import { getUserMenuListApi, deleteUserApi, addUserApi, editUserApi } from '@/api/user'
import { BasicTable } from '@/components/BasicTable'
import tableHooks from '@/hooks/basicHooks'
import UserDataDialog from './components/UserDataDialog.vue'
import UserBindMenuDialog from './components/UserBindMenuDialog.vue'

const { searchForm, total, handleSearch, handleReset, handleDelete } = tableHooks(getTableData)

const schemas = ref<FormSchema[]>([
  {
    type: 'text',
    field: 'userName',
    label: '姓名'
  },
  {
    type: 'text',
    field: 'mobile',
    label: '手机号'
  }
])
const columns = ref([
  {
    type: 'index',
    field: 'index',
    label: '序号'
  },
  {
    label: '用户名',
    field: 'userName'
  },
  {
    label: '账号名',
    field: 'account'
  },
  {
    label: '手机号',
    field: 'mobile'
  },
  {
    label: '创建日期',
    field: 'createTime'
  },
  {
    label: '菜单权限',
    field: 'menu_ids',
    slots: {
      default: data => {
        return (
          <el-link type="primary" underline={false} onClick={() => handleUserBindMenu(data)}>
            绑定权限
          </el-link>
        )
      }
    }
  },
  {
    label: '操作',
    field: 'action',
    slots: {
      default: data => {
        return (
          <>
            <el-link
              type="primary"
              underline={false}
              style={{ marginRight: '10px' }}
              onClick={() => handleListData('edit', data)}
            >
              编辑
            </el-link>
            <el-link
              type="danger"
              underline={false}
              onClick={() => handleDelete(deleteUserApi, data.id)}
            >
              删除
            </el-link>
          </>
        )
      }
    }
  }
])
/**
 * 绑定菜单权限
 */
const bindMenuRef = ref<InstanceType<typeof UserBindMenuDialog>>()
const handleUserBindMenu = data => {
  bindMenuRef.value?.handleOpen(data)
}

/**
 * 新增、修改用户
 */
const userDataDialogInfo = {
  width: '40%',
  add: {
    title: '新增用户',
    api: addUserApi
  },
  edit: {
    title: '编辑用户',
    api: editUserApi
  }
}
const userDataRef = ref<InstanceType<typeof UserDataDialog>>()
const handleListData = (type: string, data = {}) => {
  userDataRef.value?.handleOpen(type, data)
}
/**
 * 获取用户列表数据
 */
onMounted(() => {
  getTableData()
})
const tableData = ref()
async function getTableData() {
  try {
    const { code, data } = await withLoading(getUserMenuListApi, searchForm.value)
    if (code === 0) {
      tableData.value = data?.list ?? []
      total.value = data?.totalCount ?? 0
    }
  } catch (error) {
    console.log(error)
  }
}
</script>
